<template>
    <ScrollView class="classification-box" :option="scrollOptions">
    <!-- <div class="classification-box"> -->
        <!-- 下划线 -->
        <!-- <hr> -->
        <!-- 分类页 -->
        <div class="classification-content">
            <!-- <ScrollView class="left" :option="scrollOptions"> -->
                <ClassificationListBar class="content-list" 
                    :list="classify.classifyTitle" 
                    :fcid="classify.classifyFcid"
                    :sort.sync="sortTitle"
                ></ClassificationListBar>
            <!-- </ScrollView> -->
            <!-- <ClassificationDetailBar class="content-detail"></ClassificationDetailBar> -->
            <!-- <ScrollView class="right" :option="scrollOptions"> -->
                <div class="content-detail">
                    <HotBar class="content-detail-type" :list="classify.classifyRightType"></HotBar>
                    <div class="content-detail-list">
                        <p v-for="(sortName,index) in classify.classifyBottomSort" :key="index" 
                            :class="{active:sortName.sortKey==sortTitle}"
                            @click="chooseBottomTitle(classify.classifyFcid,sortName.sortKey)"
                        >{{sortName.title}}</p>
                    </div>
                    <LikeBar class="content-detail-like" :list="classify.classifyBottomType"></LikeBar>
                </div>
            <!-- </ScrollView> -->
        </div>
    <!-- </div> -->
    </ScrollView>
</template>
<script>
import ClassificationListBar from "../components/classificationListBar";
// import ClassificationDetailBar from "../components/classificationDetailBar";
import HotBar from "../components/hotBar";
import LikeBar from "../components/likeBar";

import { mapState, mapActions } from "vuex";
export default {
    components: {
        ClassificationListBar,
        // ClassificationDetailBar,
        HotBar,
        LikeBar
    },
    data() {
        return {
            scrollOptions: {
                click: true,
                pullDownRefresh: true
            },
            sortTitle: "pop"
        };
    },
    computed: {
        ...mapState(["classify"])
    },
    methods: {
        ...mapActions(["loadClassifyTitle","loadClassifyRightType","loadClassifyBottomType"]),
        chooseBottomTitle(fcid,sort){
            if(sort!=this.sortTitle){
                this.sortTitle=sort;
                this.loadClassifyBottomType({fcid,sort});
            };
        }
    },
    mounted() {
        this.loadClassifyTitle();
    }
};
</script>
<style lang="less" scoped>
//分类页样式
.classification-box {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
    width: 100%;
    // height: 100%;
}
//分类内容样式
.classification-content {
    // height: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    .content-list {
        // height: 100%;
        padding-bottom: 3rem;
        grid-column-start: 1;
        grid-column-end: 2;
        background-color: rgba(0, 0, 0, 0.1);
        // overflow-y: auto;
    }
    .content-detail {
        // height: 100%;
        grid-column-start: 2;
        grid-column-end: 5;
        // overflow-y: auto;
        > .content-detail-type {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }
        > .content-detail-list {
            width: 100%;
            display: flex;
            justify-content: space-around;
            box-sizing: border-box;
            padding: 0.3rem 0rem;
            border-top: 1px solid @gray;
            border-bottom: 1px solid @gray;
            > p {
                padding: 0rem 0.5rem;
                border-right: 1px solid @gray;
                font-weight: bold;
                font-size: 0.4rem;
            }
            > p[class="active"] {
                color: @pink;
            }
            > p:last-child {
                border: 0px solid @gray;
            }
        }
        > .content-detail-like {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }
    }
}
// .active{
//     color: @pink;
// }
</style>